<script lang="ts" setup>
import { ref } from "vue";
import type { Blog } from "~/types";
import { useAppStore } from "~/store/appStore";
import { formatDate, formatNumberToString } from "~/utils";
import { BASE_URL } from "~/api/base";
import { startShareAnimation } from "~/utils/share";
import { good } from "~/api/blog";

const appStore = useAppStore();
const router = useRouter();
const articalCardBodyDom = ref<HTMLElement | null>(null);
const props = defineProps({
  data: {
    type: Object as PropType<Blog>,
    required: true,
  },
});

function openDetail(e: Event) {
  e.preventDefault();
  appStore.showDetails = true;
  // startShareAnimation(articalCardBodyDom.value as HTMLElement);
  // appStore.setArtical(props.data);
  // router.push({
  //   name: "show",
  //   query: {
  //     id: props.data.id,
  //     svgId: radomId,
  //   },
  // });
}
const isGood = computed(() => {
  if (!props.data.id) return false;
  return appStore.goodList.includes(props.data.id);
});
const radomId = Math.floor(Math.random() * 520);
</script>

<template>
  <div
    class="articalCardBody"
    ref="articalCardBodyDom"
    :href="`/show?id=${props.data.id}`"
    @click="openDetail($event)"
  >
    <ClientOnly>
      <img
        :src="`/svg/${radomId}.svg`"
        class="background"
        :style="{
          left: `${Math.random() * 60 + 10}%`,
        }"
      />
    </ClientOnly>
    <header>
      <div class="user">
        <img
          v-if="props.data.user?.avatar"
          class="avatar"
          :src="`${BASE_URL}/public/avatar/1219460281`"
          alt="avatar"
          share="avatar"
          lazy="true"
        />
        <span
          v-else
          share="avatar"
        >
          <Icon icon="solar:user-circle-broken"></Icon>
        </span>
        <span share="username">
          {{ props.data.user?.name ?? "用户已注销" }}
        </span>
      </div>
      <div v-if="props.data.tags">
        <template
          v-for="(item, index) in props.data.tags.split(',')"
          :key="item"
        >
          <span
            :share="`tag${index}`"
            v-if="item.length > 0"
            class="tag"
          >
            {{ item }}
          </span>
        </template>
      </div>
    </header>
    <main>
      <h2>
        <Icon icon="solar:subtitles-broken"></Icon>
        <span share="title">
          {{ props.data.title }}
        </span>
      </h2>
      <p>{{ props.data.desc }}</p>
    </main>
    <footer>
      <span>
        <Icon icon="solar:calendar-date-broken" />
        {{ formatDate(props.data?.createTime ?? new Date().toLocaleString()) }}
      </span>
      <span>
        <Icon icon="solar:eye-broken" />
        {{ formatNumberToString(props.data?.views ?? Date.now()) }}
      </span>
      <span @click.stop="good(props.data.id)">
        <Icon
          v-if="!isGood"
          icon="solar:chat-round-like-broken"
        />
        <Icon
          v-else
          icon="solar:chat-round-like-bold-duotone"
        />
        {{
          formatNumberToString(
            (props.data?.goods ?? Date.now()) + (isGood ? 1 : 0)
          )
        }}
      </span>
    </footer>
  </div>
</template>

<style lang="less" scoped>
.articalCardBody {
  min-width: 10em;
  min-height: 5em;
  padding: 1em;
  background-color: var(--color-body);
  border-radius: 0.5em;
  cursor: pointer;
  box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.1);
  overflow: hidden;
  position: relative;
  .background {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    object-fit: cover;
    z-index: 0;
    opacity: 0.08;
    width: 250px;
    height: 250px;
    filter: drop-shadow(0 0 0.5em rgba(0, 0, 0, 0.7));
    transition: opacity 0.3s ease-in-out;
  }
  &:hover > .background {
    opacity: 0.3;
  }
  *:not(.background) {
    z-index: 1;
  }
  header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5em;
    margin: -0.5em -0.5em;
    border-radius: 0.5em;
    & > * {
      max-width: 50%;
      overflow-x: auto;
    }
    .user {
      display: flex;
      align-items: center;
      .avatar {
        // clip-path: circle(50% at 50% 50%);
        width: 1.5em;
        border-radius: 1em;
        aspect-ratio: 1/1;
        margin-right: 0.5em;
      }
      span {
        display: grid;
        place-items: center;
        svg {
          font-size: 1.5em;
          margin-right: 0.3em;
          clip-path: circle(50% at 50% 50%);
        }
      }
    }
    .tag {
      padding: 0.2em 0.5em;
      border-radius: 0.5em;
      margin: 0 0.2em;
      font-size: 0.8em;
      font-weight: 500;
      letter-spacing: 0.5px;
      background-color: var(--color-primary);
      color: var(--color-body);
    }
  }
  main {
    margin-top: 1em;
    h2 {
      display: flex;
      align-items: center;
      svg {
        margin-right: 0.3em;
        font-size: 1.1em;
      }
    }
    p {
      margin-top: 0.5em;
    }
  }
  footer {
    margin-top: 1em;
    display: flex;
    justify-content: space-between;
    span {
      display: flex;
      align-items: center;
      cursor: pointer;
      svg {
        margin-right: 0.1em;
        font-size: 1.5em;
      }
      &:hover {
        color: var(--primary-200);
      }
    }
  }
}
</style>
